<?php
    $registry   = Zend_Registry::getInstance();
    $constants = $registry->constants;
    $this->headLink()->appendStylesheet($this->baseUrl().'/static/css/main.css');
    $this->headLink()->appendStylesheet($this->baseUrl().'/static/css/place.css');
    $this->headScript()->appendFile("/static/js/jquery.js");
    $this->headScript()->appendFile("/static/js/jquery-ui-1.10.3.custom.js");
    $this->headScript()->appendFile("/static/js/jquery-ui-1.10.3.custom.min.js");
    $this->headScript()->appendFile("/static/js/jquery-ui-1.10.3.custom.min.js");
    
    $this->headLink()->appendStylesheet($this->baseUrl().'/static/chosen/docsupport/style.css');
    $this->headLink()->appendStylesheet($this->baseUrl().'/static/chosen/docsupport/prism.css');
    $this->headLink()->appendStylesheet($this->baseUrl().'/static/chosen/chosen.css');
    
?>
<html>
    <head>
        <?php 
            echo $this->headLink();
            echo $this->headScript();
            ?>
        <meta charset="utf-8">
        <title>Add Place</title>
        <link rel="shortcut icon" href="/static/images/favicon.png">
        
        
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                <div class="topbar-center">
                    <span style="color:#DF5A49;font-weight: bold">ADD</span>
                    <span style="color:#000">PLACE</span>
                </div>
                <div class="login-logout">
                    <span><?php echo "Xin chào ".$this->userName?></span> | <span><a href="/place/index/logout">LogOut</a></span>
                </div>
            </div>
            <div class="content">
                <div class="menu-left">
                    <ul>
                    <?php foreach($this->userFeature as $key=>$value){?>
                        <li><a href="<?php echo $value->feature_url?>"><?php echo $value->feature_name;?></a></li>
                    <?php }?>
                    </ul>
                </div>
                <div class="edit-place-content">
                    <div class="content1-title" >
                    </div>
                    <div class="alert-title" id="alert"></div>
                    <form enctype="multipart/form-data" id="myform">
                        <div class="content1-group-input-left">
                            <input type="hidden" id="place_id" name="place_id" value="" style="text-decoration: none" />
                             <input type="hidden" id="latitude" name="latitude" value="" style="text-decoration: none" />
                             <input type="hidden" id="longitude" name="longitude" value="" style="text-decoration: none" />
                             <div class="input-field-left">Tên(*)</div>
                             <input value="" maxlength="255" type="text" id="place_name" name="name"  placeholder="Tên" class="input-field-right" />
                             <div class="input-field-left">Địa chỉ(*)</div>
                             <input value="" maxlength="1000" type="text" id="place_address" name="address"  placeholder="Địa chỉ" class="input-field-right" />
                             <div class="input-field-left">Điện thoại</div>
                             <input value="" maxlength="45" type="text" id="place_phone" name="phone"  placeholder="Điện thoại" class="input-field-right" />
                             <div class="input-field-left">Email</div>
                             <input value="" maxlength="255" type="text" id="place_mail" name="mail"  placeholder="Email" class="input-field-right" />
                             <div class="input-field-left">Website</div>
                             <input value="" maxlength="100" type="text" id="place_website" name="website"  placeholder="Website" class="input-field-right" />
                             <div style="width:100%;display:block; float: left">
                                <div class="input-field-left">Mô tả</div>
                                <textarea class="input-field-right-area2" id="place_description" name="description" maxlength="600" ></textarea>
                             </div>
                             
                             <div class="input-field-left">Place Category(*)</div>
                             <select class="input-field-right" id="place_category" name="category">
                                 <option value=""></option>
                                <?php foreach ($this->placeCategory as $key => $value) {?>
                                    <option value="<?php echo $value->category_id.','.$value->icon_path;?>"><?php echo $value->category;?></option>
                                <?php }?>
                             </select>
                             <input type="hidden" id="map_icon" name="map_icon" value="" style="text-decoration: none" />
                             <input type="hidden" id="category_id" name="category_id" value="" style="text-decoration: none" />
                             <div class="input-field-left">Tỉnh</div>
                             <select class="input-field-right" id="place_province" name="province">
                                <?php foreach ($this->province as $key => $value) {?>
                                    <option value="<?php echo $value->province_id;?>"><?php echo $value->name;?></option>
                                <?php }?>
                             </select>
                             <div class="input-field-left">Tag Category</div>
                             <select class="input-field-right" id="tag_category" name="tag_category">
                                <?php foreach ($this->tagCategory as $key => $value) {?>
                                    <option value="<?php echo $value;?>" ><?php echo $value;?></option>
                                <?php }?>
                             </select>
                             <div style="width:100%;display:block; float: left">
                                <div class="input-field-left">Sản phẩm, dịch vụ(*)</div>
                                <textarea value="" maxlength="1000"  id="product_service" name="product_service" class="input-field-right-area2" ></textarea>
                                <button type="button" onclick="createTag('/place/merchant-place/get-tag')">Tạo tag</button>
                             </div>
                             <div style="width:100%;display:block; float: left">
                                <div class="input-field-left">Tag</div>
                                <textarea class="input-field-right-area2" id="tag" name="tag" maxlength="500" ></textarea>
                             </div>
                         </div>
                        
                         <div class="content1-group-input-right">
                             <div class="input-field-left">Nhập địa chỉ</div>
                             <input value="" maxlength="100" type="text" id="search_address" placeholder="Nhập địa chỉ để tìm" class="input-field-right" />
                             <button type="button" onclick="searchAddress()">Tìm kiếm</button>
                             <div id="map_canvas" class="map-canvas">
                             </div>
                         </div>
                    </form>
                    <div class="button-add">
                        <button class="button-test" onclick="addPlace('/place/merchant-place/add-place')">
                            Add New
                        </button>
                        <button class="button-test" onclick="addPlace('/place/merchant-place/update-merchant-place')">
                            Update Place
                        </button>
                        <button class="button-test" onclick="clearContent()">
                            Clear
                        </button>
                        <button class="button-test" onclick="history.back();">
                            Back
                        </button>
                    </div>
                </div>
                <div class="deal-content2">
                    <div class="content1-title" >
                        New Places
                    </div>
                    <div class="table-alt" id="table-not-approved">
                    </div>
                    <div class="button-add">
                        <button class="button-test" onclick="deleteMultiPlace('/place/merchant-place/delete-place')">
                            Delete
                        </button>
                        <button class="button-test" onclick="requestMultiPlace('/place/merchant-place/request-place')">
                            Request Approve
                        </button>
                    </div>          
                </div>
                
                <div class="deal-content2">
                    <div class="content1-title" >
                        Approved Deal
                    </div>
                    <div class="approved-table-alt" id="approved-table-alt">
                    </div>
                </div>
            </div>
            
        </div>

    </body>
</html>
<script>

    $(document).ready(function(){
        $("#place_name").focus();
        $("#table-not-approved").load('/place/merchant-place/load-place-not-approved');
    });
    
    function searchAddress(){
        address = $('#search_address').val();
        var geo = new google.maps.Geocoder;
            geo.geocode({'address':address},function(results, status){
                if (status == google.maps.GeocoderStatus.OK) {
                    var map_canvas = document.getElementById('map_canvas');
                    var myLatlng = new google.maps.LatLng(
                                              results[0].geometry.location.lat(), 
                                              results[0].geometry.location.lng());
                    var map_options = {
                      center: myLatlng,
                      zoom: 16,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                        
                    var map = new google.maps.Map(map_canvas, map_options);
                    
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        draggable:true,
                        title: 'Hello World!'
                    });
                    google.maps.event.addListener(marker, 'dragend', function(a){
                        document.getElementById("latitude").value = this.getPosition().lat();
                        document.getElementById("longitude").value = this.getPosition().lng();
                    });
              } else {
                alert("Geocode was not successful for the following reason: " + status);
              }
            });
    }
    
    
    function deleteMultiPlace(url){
        if ($("input[name='merchant_selected[]']").is(":checked")) {
            if (confirm("<?php echo $constants->DELETE_MERCHANT_CONFIRM;?>")) {
                var placeList = $("input[name='merchant_selected[]']:checked").map(function() {
                    return Number(this.value);
                }).get().join(",");
                $.get(url, {
                    'placeList' : placeList
                }, function(responseData) {
                    $('#alert').html(responseData);
                    page = $("#pagging-seach").val();
                    $("#table-not-approved").load('/place/merchant-place/load-place-not-approved?page='+page);
                });
            }
        } else {
            $("#alert").text('<?php echo $constants->DELETE_MERCHANT_SELECT;?>');
        }
    }
    
    function requestMultiPlace(url){
        if ($("input[name='merchant_selected[]']").is(":checked")) {
            if (confirm("<?php echo $constants->APPROVE_MERCHANT_CONFIRM;?>")) {
                var placeList = $("input[name='merchant_selected[]']:checked").map(function() {
                    return Number(this.value);
                }).get().join(",");
                $.get(url, {
                    'placeList' : placeList
                }, function(responseData) {
                    $('#alert').html(responseData);
                    page = $("#pagging-seach").val();
                    $("#table-not-approved").load('/place/merchant-place/load-place-not-approved?page='+page);
                });
            }
        } else {
            $("#alert").text('<?php echo $constants->APPROVE_MERCHANT_SELECT;?>');
        }
    }
    
    function loadDeal(url, id){
        $("#alert").val("");
        $("#alert").text("");
        
        url = url+"?place_id="+id;
        
        $.ajax({
                url : url,
                success : function(data) {
                    if(data != '<?php echo $constants->ERROR_STRING ?>'){
                        dealObject = JSON.parse(data);
                        $("#place_id").val(dealObject['place_id']);
                        $("#place_name").val(dealObject['name']);
                        $("#place_address").val(dealObject['address']);
                        $("#place_phone").val(dealObject['phone']);
                        $("#place_mail").val(dealObject['mail']);
                        $("#place_website").val(dealObject['website']);
                        $("#place_description").val(dealObject['description']);
                        $("#place_category").val(dealObject['category_id']+","+dealObject['map_icon']);
                        $("#place_province").val(dealObject['province_id']);
                        $("#product_service").val(dealObject['product_service']);
                        $("#tag").val(dealObject['tag']);
                        
                        $("#latitude").val(dealObject['latitude']);
                        $("#longitude").val(dealObject['longitude']);
                        $("#map_icon").val(dealObject['map_icon']);
                        $("#category_id").val(dealObject['category_id']);
                        
                        var map_canvas = document.getElementById('map_canvas');
                        var myLatlng = new google.maps.LatLng(dealObject['latitude'], dealObject['longitude']);
                        var map_options = {
                          center: myLatlng,
                          zoom: 16,
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                        }
                        
                        var map = new google.maps.Map(map_canvas, map_options);
                        
                        var marker = new google.maps.Marker({
                            position: myLatlng,
                            map: map,
                            draggable:true,
                            title: 'Địa điểm'
                        });

                        google.maps.event.addListener(marker, 'dragend', function(a){
                            document.getElementById("latitude").value = this.getPosition().lat();
                            document.getElementById("longitude").value = this.getPosition().lng();
                        });
                        
                    }else{
                        $("#alert").text(data);
                    }
                }
            });
    }
    
    function checkAll(){
        var inputs = document.getElementsByTagName("input");

        for (var i = 0; i < inputs.length; i++)
            if (inputs[i].type == "checkbox") {
                if ($('#checkAll').is(':checked'))
                    inputs[i].checked = true;
                else
                    inputs[i].checked = false;
            }
    }
    
    function createTag(url){
        $name = $('#product_service').val();
        $title = $('#place_name').val();
        $category = $('#tag_category').val();
        $.get(url,{
            "name":$name,
            "title":$title,
            "category":$category
            },function(responseData){
                $('#tag').val(responseData);    
            });
    }
    
    function clearContent(){
        $("#place_name").val("");
        $("#place_name").focus();
        $("#place_address").val("");
        $("#latitude").val("");
        $("#longitude").val("");
        $("#place_phone").val("");
        $("#place_mail").val("");
        $("#place_website").val("");
        $("#place_description").val("");
        $("#place_province").val("");
        $("#product_service").val("");
        $("#tag").val("");
        $("#category_id").val("");
        $("#map_icon").val("");
    }
    
    $('#place_category').change(function() {
        var place_category = $('#place_category option:selected').val().split(',');
        $("#category_id").val(place_category[0]);
        $("#map_icon").val(place_category[1]);
    });
    
    function updatePlace(url){
        place_name = $.trim($("#place_name").val());
        place_address = $.trim($("#place_address").val());
        product_service = $.trim($("#product_service").val());
        latitude = $.trim($("#latitude").val());
        longitude = $.trim($("#longitude").val());
        place_id = $.trim($("#place_id").val());
        
        if(place_name == '' ||
            place_address == '' ||
            product_service == '' ||
            latitude == '' ||
            longitude == '' ||
            place_id == ''){
            
            
            if(place_name == ''){
                $("#place_name").focus();
                $("#place_name").select();    
            }
            
            if(product_service == ''){
                $("#product_service").focus();
                $("#product_service").select();
            }
            
            if(place_address == ''){
                $("#place_address").focus();
                $("#place_address").select();
            }
            
            
            $("#alert").text('<?php echo $constants->MISSING_PARAMETER;?>');        
        }else{
            var form = new FormData($('#myform')[0]);
            $.ajax({
                url : url,
                type : 'POST',
                data : form,
                success : function(res) {
                    if(res == "<?php echo $constants->UPDATE_MERCHANT_SUCCESS?>"){
                        $("#place_id").val("");
                        $("#place_name").val("");
                        $("#place_name").focus();
                        $("#place_address").val("");
                        $("#latitude").val("");
                        $("#longitude").val("");
                        $("#place_phone").val("");
                        $("#place_mail").val("");
                        $("#place_website").val("");
                        $("#place_description").val("");
                        $("#place_province").val("");
                        $("#product_service").val("");
                        $("#tag").val("");
                        $("#category_id").val("");
                        $("#map_icon").val("");
                    }else{
                        $("#place_name").focus();
                        $("#place_name").select();
                    }
                    $('#alert').html(res);
                    // $("#table-alt").load('/admin/deal/load-all');
                    $("#table-not-approved").load('/place/merchant-place/load-place-not-approved');
                },
                cache : false,
                contentType : false,
                processData : false
            });
        }
    }

    function addPlace(url){
        place_name = $.trim($("#place_name").val());
        place_address = $.trim($("#place_address").val());
        product_service = $.trim($("#product_service").val());
        latitude = $.trim($("#latitude").val());
        longitude = $.trim($("#longitude").val());
        
        place_phone = $.trim($("#place_phone").val());
        place_mail = $.trim($("#place_mail").val());
        place_website = $.trim($("#place_website").val());
        place_description = $.trim($("#place_description").val());
        place_province = $.trim($("#place_province").val());
        tag = $.trim($("#tag").val());
        category_id = $.trim($("#category_id").val());
        map_icon = $.trim($("#map_icon").val());
        
        if(place_name === '' || 
            place_address == '' ||
            product_service == '' ||
            latitude == '' ||
            longitude == ''||
            map_icon == ''){
                
            if(place_name == ''){
                $("#place_name").focus();
                $("#place_name").select();    
            }
            
            if(product_service == ''){
                $("#product_service").focus();
                $("#product_service").select();
            }
            
            if(place_address == ''){
                $("#place_address").focus();
                $("#place_address").select();
            }
            
            $("#alert").text('<?php echo $constants->MISSING_PARAMETER;?>');
        }else {
            var form = new FormData($('#myform')[0]);
            $.ajax({
                url : url,
                type : 'POST',
                data : form,
                success : function(res) {
                    if(res == "<?php echo $constants->ADD_MERCHANT_SUCCESS?>"){
                        // alert('xong cmnr');
                        $("#place_name").val("");
                        $("#place_name").focus();
                        $("#place_address").val("");
                        $("#latitude").val("");
                        $("#longitude").val("");
                        $("#place_phone").val("");
                        $("#place_mail").val("");
                        $("#place_website").val("");
                        $("#place_description").val("");
                        $("#place_province").val("");
                        $("#product_service").val("");
                        $("#tag").val("");
                        $("#category_id").val("");
                        $("#map_icon").val("");
                    }else{
                        $("#place_name").focus();
                        $("#place_name").select();
                        // alert('loi cmnr');
                    }
                    $('#alert').html(res);
                    // $("#table-alt").load('/admin/deal/load-all');
                    $("#table-not-approved").load('/place/merchant-place/load-place-not-approved');
                },
                cache : false,
                contentType : false,
                processData : false
            });
        }
    }    
    
</script>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var myLatlng = new google.maps.LatLng(21.013215, 105.812904);
        var map_options = {
          center: myLatlng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        
        var map = new google.maps.Map(map_canvas, map_options);
        
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            draggable:true,
            title: 'Hello World!'
        });
        google.maps.event.addListener(marker, 'dragend', function(a){
            document.getElementById("latitude").value = this.getPosition().lat();
            document.getElementById("longitude").value = this.getPosition().lng();
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    
   
</script>

<script>
    $('#admin_street').change(function() {   
      var coordinate = $('#admin_street option:selected').val().split(',');
      var myLatlng = new google.maps.LatLng(coordinate[0], coordinate[1]);
        var map_options = {
          center: myLatlng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        
        var map = new google.maps.Map(map_canvas, map_options);
        
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            draggable:true,
            title: 'Địa điểm'
        });
        
        google.maps.event.addListener(marker, 'dragend', function(a){
            document.getElementById("latitude").value = this.getPosition().lat();
            document.getElementById("longitude").value = this.getPosition().lng();
        });
    });
</script>

<script src="/static/chosen/chosen.jquery.js" type="text/javascript"></script>
<script src="/static/chosen/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var config = {
      '.chosen-select'           : {},
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }
  </script>